<template>
  <el-dialog :visible.sync="visible" center width="813px" class="check_order_result" @close="handleCancel">
    <div class="header_title_box">
      <h2>基本信息</h2>
    </div>
    <el-form :ref="formName" :model="formFieldsData" label-width="110px">
      <div class="select_form_box">
        <div class="filter-container">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="系统sku">
                <el-input v-model="formFieldsData.goods_code" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中文名称">
                <el-input v-model="formFieldsData.goods_name_ch" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="包装类型">
                <el-input v-model="formFieldsData.packing_method" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品分类">
                <el-input v-model="formFieldsData.category_name" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="即时库存">
                <el-input v-model="formFieldsData.number" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="盘点库存">
                <el-input v-model="formFieldsData.check_stock" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="差异库存">
                <el-input :value="formFieldsData.check_stock - formFieldsData.number" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="header_title_box">
        <h2>商品明细信息</h2>
      </div>
      <div v-loading="loading" class="mb24">
        <el-table :data="formFieldsData.stock" border max-height="190">
          <el-table-column label="虚拟仓库" align="center" prop="name" width="125" />
          <el-table-column label="即时库存" align="center" prop="number" width="100" />
          <el-table-column label="差异数量" align="center" width="202">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="`stock[${ scope.$index }].stock_difference`" class="mt22" :rules="numberRule">
                <el-input-number v-model="scope.row.stock_difference" :precision="0" :max="9999999999" placeholder="手工输入" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="盘库结果" align="center" width="100">
            <template slot-scope="scope">
              {{ scope.row.stock_difference > 0 ? '盘赢' : scope.row.stock_difference < 0 ? '盘亏' : '正常' }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" min-width="205">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="`stock[${ scope.$index }].notes`" class="el_form_item_mar0">
                <el-input v-model="scope.row.notes" placeholder="手动输入" maxlength="500" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="handleSubmit">保存</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </span>
  </el-dialog>

</template>

<script>
export default {
  name: 'CheckOrderResultDialog',
  data() {
    return {
      id: '',
      visible: false,
      formName: 'checkOrderResult',
      formFieldsData: {},
      loading: false,
      btnLoading: false,
      numberRule: [
        { required: true, message: '请输入数量', trigger: ['change', 'blur'] }
      ]
    }
  },
  computed: {},
  created() {},
  methods: {
    // 显示
    show({ id, info }) {
      const vm = this
      vm.id = id
      vm.formFieldsData = info
      vm.getProducts() // 获取商品
      vm.visible = true
    },
    // 获取商品列表
    getProducts() {
      const vm = this
      const params = {
        id: vm.id,
        goods_id: vm.formFieldsData.id
      }
      vm.loading = true
      vm.$http
        .post('/check-order/warehouse-goods-stock', params)
        .then((res) => {
          vm.formFieldsData['stock'] = res.data.warehouse
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 取消
    handleCancel() {
      const vm = this
      vm.formFieldsData = {}
      vm.visible = false
    },
    // 保存
    handleSubmit() {
      const vm = this
      const total = vm.formFieldsData.stock.reduce((total, ele) => {
        total += ele.stock_difference
        return total
      }, 0)
      console.log(`{ total: ${total}, number: ${vm.formFieldsData.number - vm.formFieldsData.check_stock} }`)
      if (total !== (vm.formFieldsData.check_stock - vm.formFieldsData.number)) {
        vm.$message.error('录入的差异数量之和要等于差异库存')
        return
      } else {
        const stock = vm.formFieldsData.stock.map((e) => {
          const obj = {
            virtual_warehouse_id: e.id,
            stock_difference: e.stock_difference,
            notes: e.notes
          }
          return obj
        })
        const params = {
          id: vm.id,
          goods_id: vm.formFieldsData.id,
          stock
        }
        vm.btnLoading = true
        vm.$http.post('/check-order/update-warehouse-goods-stock', params).then(res => {
          vm.$message.success('编辑成功')
          vm.visible = false
          vm.btnLoading = false
        }).catch(() => {
          vm.btnLoading = false
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.check_order_result .filter-container {
  padding-bottom: 0;
  border: none;
}
.check_order_result ::v-deep .el-dialog__header {
  padding: 0;
}
.check_order_result ::v-deep .el-dialog__body {
  padding: 16px 16px 0;
}
</style>
